<template>
  <div class="top">
    <div class="crumbs_tab">
      <el-radio-group v-model="isCollapse" @click="tabLeftNav">
        <div class="tab_nav">
          <svg v-show="shrink_tab" class="icon tab_left_nav" aria-hidden="true">
            <use xlink:href="#icon-shouqi"></use>
          </svg>
          <svg v-show="open_tab" class="icon tab_left_nav" aria-hidden="true">
            <use xlink:href="#icon-zhankai1"></use>
          </svg>
        </div>
      </el-radio-group>
      <div class="crumbs">
        <div class="crumb_item">
          <i>后台系统</i>
        </div>
        <span>/</span>
        <div class="crumb_item">
          <i>{{ menuStore.crumbsStr }}</i>
        </div>
      </div>
    </div>

    <div class="admin_info">
      <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
        <div class="pull_screen" @click="screenfullHandle">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanping"></use>
          </svg>
        </div>
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" content="通知" placement="bottom">
        <div class="system_message">
          <el-badge :value="12" class="item">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tongzhi1"></use>
            </svg>
          </el-badge>
        </div>
      </el-tooltip>
      <el-dropdown>
        <span class="el-dropdown-link">
          <div class="admin_user">
            <div class="img_box">
              <img src="../../static/images/tx.png" alt="" />
            </div>
            <div class="user_t">超级管理员</div>
          </div>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="user_info_dropdown">
            <el-dropdown-item>
              <svg class="icon dropdown_svg" aria-hidden="true">
                <use xlink:href="#icon-huiyuan21"></use></svg
              >个人信息
            </el-dropdown-item>
            <el-dropdown-item @click="exit()">
              <svg class="icon dropdown_svg" aria-hidden="true">
                <use xlink:href="#icon-exit"></use></svg
              >退出
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import emitter from "@/utils/bus";
import screenfull from "screenfull";
import piniaStore from "@/store";
const router = useRouter();
const menuStore = piniaStore();
let isFullscreen = ref(false);
const shrink_tab = ref(true);
const open_tab = ref(false);
const isCollapse = ref(false);
const tabLeftNav = () => {
  emitter.emit("isCollapseParent", isCollapse.value);
  isCollapse.value = !isCollapse.value;
  shrink_tab.value = !shrink_tab.value;
  open_tab.value = !open_tab.value;
};

const screenfullHandle = () => {
  if (!screenfull.isEnabled) {
    return false;
  }
  screenfull.toggle();
  isFullscreen.value = true;
};
const exit = () => {
  localStorage.removeItem("token");
  router.push({ path: "/login" });
};
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

.dropdown_svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  fill: #606266;
}

.el-dropdown-menu__item:hover svg {
  fill: #4d70ff;
}

.top {
  border-bottom: 1px solid #eee;
  @include display_flex;
  justify-content: space-between;

  .crumbs_tab {
    @include display_flex;
    justify-content: flex-start;

    .tab_nav {
      @include display_flex;
      margin-left: 10px;
      margin-right: 10px;

      .tab_left_nav {
        width: 24px;
        height: 24px;
        cursor: pointer;
        height: 50px;
        align-items: center;
      }

      .tab_left_nav:hover {
        color: #4d70ff;
      }
    }

    .crumbs {
      @include display_flex;
      justify-content: flex-start;

      .crumb_item {
        @include display_flex;
        color: rgb(118, 124, 130);

        i {
          text-indent: 2px;
          font-size: 14px;
          @include transition3;
        }
      }

      span {
        color: rgb(118, 124, 130);
        text-indent: 0;
        margin: 0 8px;
      }
    }
  }

  .admin_info {
    @include display_flex;
    text-indent: 0;

    > div {
      cursor: pointer;
      height: 100%;
      padding: 0 10px;
    }

    > div:hover {
      background-color: rgba(246, 246, 246, 1);
    }

    .system_message {
      margin-right: 10px;
    }

    .admin_user {
      @include display_flex;
      height: 53px;
      margin-right: 20px;

      .img_box {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 8px;

        img {
          max-width: 100%;
        }
      }
    }

    svg {
      width: 24px;
      height: 50px;
    }
  }

  .el-radio-group {
    display: block;
  }

  .el-radio-group:hover {
    background-color: rgba(246, 246, 246, 1);
  }

  :deep(.el-badge__content.is-fixed) {
    top: 14px;
  }
}
</style>
